<template>
    <div>
      <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>投诉管理</el-breadcrumb-item>
        <el-breadcrumb-item>投诉处理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card card" id="card">
        <!--表格内容显示区域-->
        <el-table
          :max-height="this.getTableMaxHeight()"
          v-loading="loading" element-loading-text="数据加载中..."
          :data="page.records"
          border
          size="mini"
          style="width: 100%;">
          <el-table-column
            width="60px"
            align="center"
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            width="150px"
            align="center"
            prop="reason"
            label="投诉原因">
            <template slot-scope="scope">
              <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="300px"
            align="center"
            prop="text"
            label="投诉内容">
          </el-table-column>
          <el-table-column
            width="80px"
            align="center"
            type="houseId"
            label="房屋id">
            <template slot-scope="scope">
              <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.houseId }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="100px"
            align="center"
            type="userName"
            label="房东姓名">
            <template slot-scope="scope">
              <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="100px"
            align="center"
            prop="touristName"
            label="租客名字">
            <template slot-scope="scope">
              <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.touristName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="110px"
            align="center"
            prop="createTime"
            label="投诉时间">
          </el-table-column>
          <el-table-column
            width="120px"
            align="center"
            prop="deal"
            label="处理情况">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.deal === 0">未处理</el-tag>
              <el-tag type="success" v-else-if="scope.row.deal === 1">已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="约谈" placement="top" :enterable="false">
                <el-button @click="dialogVisible = true" size="mini" type="info" icon="el-icon-phone-outline"
                           circle></el-button>
              </el-tooltip>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="20%">
                租户电话：
                <span>{{scope.row.phone}}</span><br>
                房东电话：
                <span>{{scope.row.phoneNumber}}</span>
                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
              </el-dialog>
              <el-tooltip effect="dark" content="处理" placement="top" :enterable="false">
                <el-button @click="show(scope.row.houseId,scope.row.id)" size="mini" type="success" icon="el-icon-check"
                           circle></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          v-if="page.total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="page.size"
          layout="prev"
          :total="page.total">
        </el-pagination>
        <el-pagination
          v-if="page.total > 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-card>
      <ComplaintErrorInfo
        :complaintErrorInfo="complaintErrorInfo"
        :isEdit="isEdit"
        :id="id"
        :comId="comId"
        @dataUpdate="getList"
        @changeShow="showAddOrUpdate">
      </ComplaintErrorInfo>
    </div>
</template>

<script>
  import { getComplaint } from '@/api/complaint'
  import ComplaintErrorInfo from "./ComplaintErrorInfo";
    export default {
        name: "Complaint",
      data(){
          return{
            page: {
              records: [],
              total: 0,
              size: 0,
              current: 0,
            },
            pageNum: 1,
            pageSize: 5,
            loading: false,
            // 控制新增编辑弹窗的显示与隐藏
            complaintErrorInfo: false,
            isEdit: false,
            id: 0,
            comId: 0,
            dialogVisible: false
          }
      },
      components:{
          ComplaintErrorInfo
      },
      created() {
          this.getList();
      },
      methods:{
          getList(){
            this.loading = true
            getComplaint(this.pageNum, this.pageSize).then(response => {
              if(response.code==200){
                this.page = response.data
              }else {
                console.log("连接失败")
              }
            }).finally(() => {
              this.loading = false
            })
          },
        handleSizeChange (val) {
          /* 将value赋值给size, 重新查询数据 */
          this.pageSize = val
          this.onSubmit()
        },
        handleCurrentChange (val) {
          this.pageNum = val
          this.onSubmit()
        },
        onSubmit () {
          getComplaint(this.pageNum, this.pageSize).then(response => {
            this.page = response.data
          })
        },
        // 按钮点击事件 显示新增编辑弹窗组件
        show (id,comId) {
          this.complaintErrorInfo = true
          this.id = id
          this.comId=comId
        },
        // 监听 子组件弹窗关闭后触发，有子组件调用
        showAddOrUpdate (data) {
          this.complaintErrorInfo = data !== 'false'
        },
      }
    }
</script>

<style scoped>

</style>
